<template>
	<div class="text-center" style="width: 100%" v-if="$slots.default">
		<div class="words-pingyi-body">
			<div class="words-pingyi" :class="[classSize, className, {'line-grid': lineGrid}]" v-if="isShowPinyi">
				<div class="text"><slot /></div>
			</div>
		</div>
	</div>
	<div class="text-center" v-else>
		<template v-if="words.length === 1">
			<div class="words-pingyi-body" v-for="item in pingyi" :key="item">
				<div class="words-pingyi sdsd" :class="[classSize, className, {'line-grid': lineGrid}]" v-if="isShowPinyi">
					<div class="text">{{ item }}</div>
				</div>
			</div>
		</template>
		<div v-else class="words-pingyi-body">
			<div class="words-pingyi" :class="[classSize, className, {'line-grid': lineGrid}]" v-if="isShowPinyi">
				<div class="text">{{ pingyi }}</div>
			</div>
		</div>
	</div>
	
</template>

<script setup>
	import { computed, } from "vue";
	import { usePingYi } from "@/utils"
	const props = defineProps({
		words: {
			type: String,
			default: ""
		},
		size: {
			type: [String, Number],
			default: "default"
		},
		horizontal: {
			type: Boolean,
			default: true
		},
		id: {
			type: [Number, String],
			default: ''
		},
		className: {
			type: String,
			default: ''
		},
		every: {
			type: Boolean,
			default: true
		},
		showPinyi: {
			type: Boolean,
			default: true
		},
		showHorn: {
			type: Boolean,
			default: true
		},
		lineGrid: {
			type: Boolean,
			default: true
		},
	})
	const { getWordsPingYi } = usePingYi()
	const isShowPinyi = computed(() => props.showPinyi)
	// 
	const pingyi = computed(() => {
		if(!props.words) {
			return ''
		}
		if(props.words.length === 1) {
			return getWordsPingYi(props.words, props.every)?.pingyi || []
		}else{
			const pinyiArr = getWordsPingYi(props.words, props.every)
			return pinyiArr.pingyi.join(' ')
		}
		
	})
	
	const isVertical = computed(() => {
		if(props.horizontal) {
			return false
		}
		const status = splitWords.value.some(item => item.length > 1)
		return status
	})
	
	const classSize = computed(() => {
		const isNumber = Object.prototype.toString.call(props.size) === '[object Number]'
		if(isNumber) {
			return { 'width': `${props.size}rpx`, 'height': `${props.size}rpx`}
		}else{
			return `words-pingyi-size__${props.size}`
		}
	})
</script>

<style lang="scss" scoped>
.words-pingyi-body {
	display: inline-flex;
	align-items: center;
	width: 100%;
	+ .words-pingyi-body {
		margin-left: 1.6rem;
	}
}
.words-pingyi {
	font-family: "pingyi";
	padding: 0.6rem 0;
	width: 100%;
	&.line-grid {
		position: relative;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		z-index: 10;
		background-color: #fff;
		height: 3.5rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0 1rem;
		width: 100%;
		box-sizing: border-box;
		&::before, &::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			z-index: -1;
			border-top: 1px dotted #ccc;
		}
		&::before {
			top: 33.33333%;
		}
		&::after {
			top: 66.66666%;
		}
	}
}
.words-pingyi-size__large {
	height: 124px;
	.text {
		font-size: 70px;
		transform: translateY(-6rpx);
	}
}
</style>